<template>
  <view v-if="visible" class="dialog-overlay" @click="closeDialog">
    <view class="dialog-container" @click.stop>
      <view class="dialog-header">
        <text class="dialog-title">导出项目验收报告</text>
        <text class="close-btn" @click="closeDialog">×</text>
      </view>
      
      <view class="dialog-content">
        <!-- 导出类型选择 -->
        <view class="form-group">
          <text class="form-label">导出方式</text>
          <view class="radio-group">
            <label class="radio-item">
              <radio :checked="exportType === 'company'" @click="exportType = 'company'" />
              <text>按公司导出</text>
            </label>
            <label class="radio-item">
              <radio :checked="exportType === 'time_range'" @click="exportType = 'time_range'" />
              <text>按时间范围导出</text>
            </label>
          </view>
        </view>
        
        <!-- 按公司导出 -->
        <view v-if="exportType === 'company'" class="form-group">
          <text class="form-label">公司名称</text>
          <input 
            class="form-input" 
            v-model="companyName" 
            placeholder="请输入公司名称"
            maxlength="50"
          />
        </view>
        
        <!-- 按时间范围导出 -->
        <view v-if="exportType === 'time_range'" class="form-group">
          <text class="form-label">时间范围</text>
          <view class="date-range">
            <view class="date-item">
              <text class="date-label">开始时间</text>
              <picker 
                mode="date" 
                :value="startDate" 
                @change="onStartDateChange"
                :end="endDate"
              >
                <view class="date-picker">
                  <text>{{ startDate || '请选择开始时间' }}</text>
                  <text class="picker-arrow">📅</text>
                </view>
              </picker>
            </view>
            
            <view class="date-item">
              <text class="date-label">结束时间</text>
              <picker 
                mode="date" 
                :value="endDate" 
                @change="onEndDateChange"
                :start="startDate"
              >
                <view class="date-picker">
                  <text>{{ endDate || '请选择结束时间' }}</text>
                  <text class="picker-arrow">📅</text>
                </view>
              </picker>
            </view>
          </view>
        </view>
        
        <!-- 预设时间范围快捷选项 -->
        <view v-if="exportType === 'time_range'" class="form-group">
          <text class="form-label">快捷选择</text>
          <view class="quick-dates">
            <button class="quick-date-btn" @click="setQuickDate('thisMonth')">本月</button>
            <button class="quick-date-btn" @click="setQuickDate('lastMonth')">上月</button>
            <button class="quick-date-btn" @click="setQuickDate('thisQuarter')">本季度</button>
            <button class="quick-date-btn" @click="setQuickDate('thisYear')">今年</button>
          </view>
        </view>
      </view>
      
      <view class="dialog-footer">
        <button class="btn btn-cancel" @click="closeDialog">取消</button>
        <button class="btn btn-confirm" @click="confirmExport" :disabled="!canExport">
          {{ isExporting ? '导出中...' : '确认导出' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ExportReportDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      exportType: 'company', // 'company' | 'time_range'
      companyName: '',
      startDate: '',
      endDate: '',
      isExporting: false
    }
  },
  computed: {
    canExport() {
      if (this.isExporting) return false;
      
      if (this.exportType === 'company') {
        return this.companyName.trim().length > 0;
      } else if (this.exportType === 'time_range') {
        return this.startDate && this.endDate;
      }
      
      return false;
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.resetForm();
      }
    }
  },
  methods: {
    // 重置表单
    resetForm() {
      this.exportType = 'company';
      this.companyName = '';
      this.startDate = '';
      this.endDate = '';
      this.isExporting = false;
    },
    
    // 关闭对话框
    closeDialog() {
      if (!this.isExporting) {
        this.$emit('close');
      }
    },
    
    // 开始时间变化
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    
    // 结束时间变化
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    
    // 设置快捷日期
    setQuickDate(type) {
      const now = new Date();
      const year = now.getFullYear();
      const month = now.getMonth();
      
      switch (type) {
        case 'thisMonth':
          this.startDate = `${year}-${(month + 1).toString().padStart(2, '0')}-01`;
          this.endDate = this.formatDate(new Date(year, month + 1, 0));
          break;
          
        case 'lastMonth':
          const lastMonth = month === 0 ? 11 : month - 1;
          const lastMonthYear = month === 0 ? year - 1 : year;
          this.startDate = `${lastMonthYear}-${(lastMonth + 1).toString().padStart(2, '0')}-01`;
          this.endDate = this.formatDate(new Date(lastMonthYear, lastMonth + 1, 0));
          break;
          
        case 'thisQuarter':
          const quarterStart = Math.floor(month / 3) * 3;
          this.startDate = `${year}-${(quarterStart + 1).toString().padStart(2, '0')}-01`;
          this.endDate = this.formatDate(new Date(year, quarterStart + 3, 0));
          break;
          
        case 'thisYear':
          this.startDate = `${year}-01-01`;
          this.endDate = `${year}-12-31`;
          break;
      }
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 确认导出
    async confirmExport() {
      if (!this.canExport) return;
      
      this.isExporting = true;
      
      try {
        let exportParams = {
          query_type: this.exportType
        };
        
        if (this.exportType === 'company') {
          exportParams.select_comp = this.companyName.trim();
        } else if (this.exportType === 'time_range') {
          exportParams.starttime = this.startDate;
          exportParams.endtime = this.endDate;
        }
        
        // 触发导出事件
        this.$emit('export', exportParams);
        
        // 关闭对话框
        this.closeDialog();
        
      } catch (error) {
        console.error('导出参数处理失败:', error);
        uni.showToast({
          title: '参数错误',
          icon: 'none'
        });
      } finally {
        this.isExporting = false;
      }
    }
  }
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-container {
  background: white;
  border-radius: 12rpx;
  width: 90%;
  max-width: 600rpx;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
  background-color: #f8f9fa;
}

.dialog-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog-content {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.form-group {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
  font-weight: 500;
}

.radio-group {
  display: flex;
  gap: 30rpx;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 10rpx;
  font-size: 28rpx;
  color: #666;
  cursor: pointer;
}

.form-input {
  width: 100%;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-input:focus {
  border-color: #007aff;
  outline: none;
}

.date-range {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.date-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.date-label {
  font-size: 26rpx;
  color: #666;
}

.date-picker {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border: 1rpx solid #ddd;
  border-radius: 8rpx;
  background: white;
  font-size: 28rpx;
}

.picker-arrow {
  color: #999;
}

.quick-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.quick-date-btn {
  padding: 15rpx 25rpx;
  background: #f0f0f0;
  border: none;
  border-radius: 6rpx;
  font-size: 26rpx;
  color: #666;
  cursor: pointer;
}

.quick-date-btn:active {
  background: #e0e0e0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  padding: 30rpx;
  border-top: 1rpx solid #e0e0e0;
  background-color: #f8f9fa;
}

.btn {
  padding: 20rpx 40rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
  cursor: pointer;
  min-width: 120rpx;
  text-align: center;
}

.btn-cancel {
  background: #f0f0f0;
  color: #666;
}

.btn-confirm {
  background: #007aff;
  color: white;
}

.btn-confirm:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.btn:active:not(:disabled) {
  opacity: 0.8;
}
</style>